<template>
    <div class="Inquire">
        <navbar title="搜索" :show-back="true" style="background-color: gold;"></navbar>
        <page>
            <div>
                <div class="Square">
                    <div class="Square-search">
                        <img @click="trigger(clicks)" class="Square-img" src="../../static/images/icon/search.png">
                        <input v-model="initext" @change="trigger(clicks)" class="Square-text" type="text" >
                    </div>
                </div>
            </div>
            <van-list v-model="dd" :immediate-check="false" :finished="dd" finished-text="没有更多了" @load="getTabList">
                <div class="nodata" v-if="Ininfo.length == 0">
                    <img src="../../static/images/img/noLogin.png">
                    <p style="text-align: center;">没有数据</p>
                </div>
                <template v-else>
                    <item :list="Ininfo"></item>
                </template>
            </van-list>
        </page>
    </div>
</template>

<script>
export default {
    data() {
        return {
            dd: false,
            dd1: false,
            Ininfo: [],//存储数据
            initext: "",//搜索值
            pagemax:6,//最大页数
            pageindex:1,//初始页数
            clicks:"click"
        }
    },
    created() {

    }
    ,
    methods: {
        async trigger(cka) {
            
            if (this.initext != "") {
                if(cka=="click"){
                    this.Ininfo=[];  //搜索内容改变数据制空
                    this.pageindex=1;
                }
                let res = await this.$http.home.trigger({keyword: this.initext,page:2});//获取搜索内容

                res.forEach(v=>{ this.Ininfo.push(v)}) //循环添加数据
            }else{
                this.Ininfo=[]  //搜索内容为空 数据制空
            }
        },
        getTabList(){
            this.pageindex+=1  //页数加一
            
            this.trigger()//再次获取搜索内容

            //判断页数是否达到最大页数
            if(this.pageindex>this.pagemax){
                this.dd1=true; //加载完成后不再触发load事件
            }else{
                this.dd=false; // 触发 load  事件
            }
        }
    }
}
</script>

<style scoped lang="less">
@import "~@less/Inquire";
</style>